<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>登录-Layui</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="../static/layui/css/layui.css">
        <style type="text/css">
            body{margin:0; padding:0;background-image: url(../static/images/login-bg.jpg); background-repeat: no-repeat; background-size:auto;}
            div{
                box-sizing: border-box;
            }
            .login-container{ 
                width:80%;
                height:600px;
                margin:0 auto;
                margin-top:100px;
                background-color: rgba(255,255,255,0.5);


            }
            .login-logo{ 
               display:flex;
               height:600px;
               align-items: center;
               justify-content: center;
               background: url(../static/images/login-logo2.jpg) no-repeat center;
               background-size: cover;
            }
            .login-logo-title{
                font-size:30px;
                margin:30px 0;
                color:#fff;
                text-align: center;
            }
            .login-logo-detail{
                box-sizing: border-box;
                padding:50px;
                text-align:center;
                font-size:20px;
                color:#fff;
            }
            .login-main{ 
                height:600px;
                padding:50px;

            }
            .login-title{ 
                font-size:26px;
                margin-bottom:20px;
                border-bottom: 1px solid #ccc;
                letter-spacing: 20px;
                color:#fff;
                text-align: center;

            }

            .layui-col-space10{
                margin:0;
            }
            @media screen and (max-width: 970px) {
                .login-logo{
                    height:auto;
                }
                .login-logo-detail{
                    display: none;
                }

            }

        </style>
    </head>
    <body>
        <!-- 登录页面容器 -->
        <div class="login-container">
            <div class="layui-row layui-col-space10">
                <!-- 左侧logo区域 -->
                <div class="layui-col-md8 login-logo">
                    <div>
                        <div class="login-logo-title">Layui后台管理系统</div>
                        <div class="login-logo-detail">
                            路漫漫其修远兮，吾将上下而求索
                        </div>
                    </div>
                </div>
                <!-- 右侧登录区域 -->
                <div class="layui-col-md4 login-main">
                    <div class="login-title">
                        登录
                    </div>
                    <form class="layui-form" action="index.html">
                        <!--  用户名输入框 -->
                        <div class="layui-form-item">
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-username"></i>
                                </div>
                                <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" lay-reqtext="用户名不能为空" />

                            </div>
                        </div>
                        <!--  密码输入框 -->
                        <div class="layui-form-item">
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-password"></i>
                                </div>
                                <input type="text" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" lay-reqtext="密码不能为空" />
                            </div>
                        </div>
                        <!--  验证码输入框 -->
                        <div class="layui-form-item">
                            <div class="layui-row">
                                <div class="layui-col-xs7">
                                    <div class="layui-input-wrap">
                                        <div class="layui-input-prefix">
                                            <i class="layui-icon layui-icon-vercode"></i>
                                        </div>
                                        <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
                                    </div>
                                </div>
                                <div class="layui-col-xs5">
                                    <div style="margin-left: 10px;">
                                        <img src="https://www.oschina.net/action/user/captcha" onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
                            <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
                        </div>
                        <!--  登录按钮 -->
                        <div class="layui-form-item">
                            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login-form">登录</button>
                        </div>
                    </form>
                    <div class="login-footer" style="margin-top:50px;text-align: center;">
                        <div class="login-footer-detail">
                            Copyright&copy;2025-2026 Layui后台管理系统
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 登录页面容器 -->
        <script src="../static/layui/layui.js"></script>
        <script>
            layui.use(['form', 'layer'], function () { 
                var form = layui.form
                    ,layer = layui.layer;
                    form.on('submit(login-form)', function(data){ 
                        layer.alert(JSON.stringify(data.field),{icon:1,time:1000});
                        return true
                    })
            });
        </script>
    </body>

</html>